<template>
  <view class="wrap-quest">
    <!-- 任务 -->
    <view v-if="quest.status == 0">
      <!-- 视频 -->
      <MyQuest3 v-if="quest.mode == 2 || quest.mode == 4" ref="myQuest3" :completeCount="completeCount"
                :quest="quest" :sum="sum" @uploadVideo="uploadImg"></MyQuest3>
      <!-- 图片-->
      <MyQuest2 v-if="quest.mode == 1" ref="myQuest2" :completeCount="completeCount" :quest="quest"
                :sum="sum" @uploadImg="uploadImg"></MyQuest2>
      <!-- 答题 -->
      <MyQuest1 v-if="quest.mode == 3" ref="myQuest1" :completeCount="completeCount" :quest="quest" :sum="sum"
                @choice="onChoice"></MyQuest1>
      <view class="btns">
        <image class="btn" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/xyx-btn.png"
               @click="toUrl(`/pages/challenge/learn?scenicId=${scenicId}`)"></image>
        <image class="btn" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/jcsk-btn.png"
               @click="upload"></image>
      </view>
      <image class="xyg-btn" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/xyg-btn.png"
             @click="onSubmit"></image>
    </view>

    <!-- 剧本 -->
    <zy-quest ref="zQuest" :obj="questObj" @close="onClose"></zy-quest>

    <!-- 答题后提示 -->
    <zy-tips ref="zTips" :content="zTipsContent" @onContinue="onContinue"></zy-tips>

    <!-- 结果 -->
    <zy-pass ref="zPass" :obj="passObj"></zy-pass>
  </view>
</template>

<script>
import MyQuest1 from "@/components/quest/quest1.vue";
import MyQuest2 from "@/components/quest/quest2.vue";
import MyQuest3 from "@/components/quest/quest3.vue";
import {
  uploadImage
} from "@/api/upload.js";
import {
  historyFindOneTask,
  newlyHighlightMoment,
  historyDoTask,
  historyDoTaskBoolean,
  historyScenicClearance,
  historySaveEventIndex,
  historyGetEventIndex,
} from "@/api/challenge";

export default {
  data() {
    return {
      groupScenicId: null,
      scenicId: null, // 景点id
      quest: {}, // 当前任务,
      partyId: null, // 团ID
      highlightMomentUrl: null,
      select: null, // 答题任务 选择项
      url: null, // 图片任务 图片地址
      index: 0, // 任务索引
      list: [], // 全部任务
      umCompleteCount: 0,
      completeCount: 0,
      zTipsContent: "",
      passObj: {}, // 结果参数
      questObj: {}, // 剧本参数
      mileage: 0,
    };
  },
  components: {
    MyQuest1,
    MyQuest2,
    MyQuest3,
  },
  computed: {
    // quest() { // 任务1
    //   return this.list.length > 0 ? this.list[0] : {}
    // }
    // 任务
    // quest() {
    // return this.list?.filter(el => el.testTask.userHistoryTasks?.length == 0 )[0] || {}
    // },

    // 总数
    sum() {
      return this.completeCount + this.umCompleteCount;
    },
  },
  onLoad({
           mileage,
           partyId,
           scenicId,
           groupScenicId
         }) {
    console.log('mileage', mileage)
    this.mileage = mileage
    this.partyId = partyId;
    this.scenicId = scenicId;
    this.groupScenicId = groupScenicId;
    console.log(scenicId);
    historyGetEventIndex({
      partyId,
      groupScenicId,
    }).then((res) => {
      this.index = res.evenIndex || 0;
      if (res.status == 2) {
        uni.showToast({
          title: "您已完成所有任务提交",
          icon: "none",
        });
        uni.navigateBack({
          delta: 1,
        });
      }
    });
    this.getHistoryFindTask(partyId, scenicId);
  },
  methods: {
    // 答题反馈 是否继续提交
    onContinue(e) {
      // console.log(e)
      this.submitTask();
    },
    // 剧情查看完毕
    onClose() {
      this.submitTask()
      // this.index += 1;
      // this.watchFn();
    },
    // 选择项
    onChoice(e) {
      var aData = ""
      e.forEach(item => {
        aData += item
      })
      this.select = aData;
    },
    // 图片上传
    uploadImg(e) {
      // console.log(e);
      this.url = e;
    },
    // 上传图片
    upload() {
      uploadImage().then((res) => {
        // this.highlightMomentUrl = res;
        newlyHighlightMoment({
          partyId: this.partyId,
          itineraryId: this.quest.itineraryId,
          highlightMomentUrl: res,
        }).then((res) => {
          // console.log(res)
          uni.showToast({
            icon: "none",
            title: "成功记录下精彩时刻",
          });
        });
      });
    },
    // 获取景点任务
    getHistoryFindTask(partyId = 19, scenicId = 17) {
      historyFindOneTask({
        partyId,
        scenicId,
      }).then((res) => {
        this.completeCount = res.completeCount;
        this.umCompleteCount = res.umCompleteCount;
        // this.list = res.scenicTaskDtos.filter(el => el.status == 0)
        this.list = res.scenicTaskDtos.filter((el) => el.status != 2);
        console.log("this.list", this.list)

        this.watchFn();
      }).catch(err => {
        // console.log("==========err",err)
        // uni.navigateBack();
        uni.showToast({
          title: err.msg,
          icon: "none",
          duration: 2000,
          success: () => {
            let timer = setTimeout(() => {
              clearTimeout(timer);
              uni.navigateBack({
                delta: 1
              })
            }, 2000)
          }
        })
      });
    },
    // 执行任务
    watchFn() {
      this.quest = this.list[this.index] || {};
      // this.quest = this.list.filter(el => el.status != 2 && el.mode == 2)[this.index] || {} // 视频
      this.questObj = null;

      console.log("this.quest", this.quest)
      if (this.quest.status == 1) {
        this.questObj = this.quest;
        // 剧本
        this.$refs.zQuest.show();
      }
    },
    toUrl(url) {
      if (!url) return;
      uni.navigateTo({
        url,
      });
    },
    // 提交任务
    submitTask() {
      // 图片 视频
      if (this.quest.mode == 1 || this.quest.mode == 2 || this.quest.mode == 4) {
        historyDoTask({
          partyId: this.partyId,
          scenicTaskId: this.quest.scenicTaskId,
          url: this.url,
        }).then((res) => {
          if (this.quest.mode == 1) {
            this.$refs.myQuest2.clear();
          } else if (this.quest.mode == 2 || this.quest.mode == 4) {
            this.$refs.myQuest3.clear();
          }
          this.url = null;
        });
      } else if (this.quest.mode == 3) { // 答题
        historyDoTask({
          partyId: this.partyId,
          scenicTaskId: this.quest.scenicTaskId,
          select: this.select,
        }).then((res) => {
          // console.log(res)
          this.select = null;
          this.$refs.myQuest1.clear();
        });
      }
      this.nextStep();
    },
    // 下一步 下一步
    nextStep() {
      this.index += 1;
      if (this.index >= this.list.length) {
        //评分   景点通关
        historyScenicClearance({
          partyId: this.partyId,
          mileage: Number(this.mileage),
          groupScenicTaskId: this.quest.scenicTaskId,
        }).then((res) => {
          if (res.umCompleteScenicCount == 0) {
            // 正式
            this.passObj = {
              // itineraryId: this.quest.itineraryId,
              partyId: this.partyId,
              ...res,
            };
            this.$refs.zPass.show();
          } else {
            uni.navigateBack({
              delta: 1,
            });
          }
        });
        return;
      }
      // 记录索引
      historySaveEventIndex({
        // evenIndex: this.quest.nowCount,
        evenIndex: this.index,
        groupScenicId: this.groupScenicId,
        partyId: this.partyId,
      }).then((res) => {
        console.log(res);
      });
      this.watchFn();
    },
    // 下一步，先判断题目正确性
    onSubmit() {
      if (this.quest.isComplete) { // 同学已经答题,需要跳过答题验证
        this.nextStep();
        return
      }

      // 图片任务1 视频任务2 领队任务4
      if (
          this.quest.mode == 1 ||
          this.quest.mode == 2 ||
          this.quest.mode == 4
      ) {
        if (!this.url) {
          uni.showToast({
            icon: "none",
            title: `请选择您上传${["图片", "视频"][this.quest.mode - 1]}`,
          });
          return;
        }
        this.submitTask();
        return
      }

      // 答题 3
      if (this.quest.mode == 3) {
        if (!this.select) {
          uni.showToast({
            icon: "none",
            title: "请选择您认为正确的答案",
          });
          return;
        }
        historyDoTaskBoolean({
          scenicTaskId: this.quest.scenicTaskId,
          select: this.select,
        }).then((res) => {
          if (res) {
            // 答题正确 直接提交
            this.submitTask();
            return;
          }
          if (res == false) {
            // 回答错误 提示
            this.zTipsContent = `第${this.quest.nowCount}题回答错误，学一学中有正确答案，快去看看吧`;
            this.$refs.zTips.show();
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap-quest {
  width: 100%;
  padding-bottom: 100rpx;

  .btns {
    padding: 0 40rpx 20rpx;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn {
      width: 300rpx;
      height: 92rpx;
    }
  }

  .xyg-btn {
    width: calc(100% - 80rpx);
    height: 92rpx;
    display: block;
    margin: 0 auto;
  }
}
</style>
